import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import memo from '../common/wrapMemo';
import api from '../../api';

import style from './Header.module.scss';
import { useNavigate } from 'react-router';
import modules from '../../store/modules';
import UserDropdown from '../user/UserDropdown';

const { actionCreators } = modules;

const Header = memo((props) => {
    const { userInfo, dispatch } = props;
    const navigate = useNavigate();
    const [showUserInfo, setShowUserInfo] = useState(false);

    const { roleId } = userInfo.toJS().role;

    useEffect(async () => {
        const localUser = localStorage.getItem('user');

        if (!userInfo.get('userId')) {
            if (!localUser) {
                navigate('/login');
                return;
            } else {
                dispatch(actionCreators.userInfo.update(JSON.parse(localUser)));
            }
        }

        // const result = await api.user.queryAll();
        // console.log(result);
    }, [userInfo]);

    const onChange = (menuName) => {
        dispatch(actionCreators.menu.change(menuName));
        if (menuName === '数据审核') {
            navigate('/dataAudit');
        } else if (menuName === '用户管理') {
            navigate('/auditUser');
        } else if (menuName === '数据管理') {
            navigate('/dataManage');
        } else if (menuName === '日志管理') {
            navigate('/');
        }
    };
    const onChangePassword = () => {
        setShowUserInfo(false);
        navigate('/');
        dispatch(actionCreators.menu.change('修改密码'));
    };
    const onLogout = () => {
        setShowUserInfo(false);
        // navigate('/login');
        localStorage.removeItem('user');

        // window.location.href="/webapi/2.0/user/logout";

        api.user.loginOut().then((res) => {
            console.log(res);
        })

    };
    return (
        <>
            <div className={style.header}>
                <span className={style.title} onClick={() => navigate('/')}>
                    象山县农业产业电子地图平台
                </span>
            </div>
            <div className={style.nav}>
                {roleId === 1 && (
                    <div className={style.navItem} onClick={() => onChange('用户管理')}>
                        <i className="iconfont icon-user-manage"></i>
                        <span>用户管理</span>
                    </div>
                )}
                {(roleId === 1 || roleId === 3) && (
                    <div className={style.navItem} onClick={() => onChange('数据管理')}>
                        <i className="iconfont icon-data-manage"></i>
                        <span>数据管理</span>
                    </div>
                )}
                {(roleId === 1 || roleId === 2) && (
                    <div className={style.navItem} onClick={() => onChange('数据审核')}>
                        <i className="iconfont icon-data-audit"></i>
                        <span>数据审核</span>
                    </div>
                )}
                {roleId === 1 && (
                    <div className={style.navItem} onClick={() => onChange('日志管理')}>
                        <i className="iconfont icon-log"></i>
                        <span>日志</span>
                    </div>
                )}
                <div className={style.user} onClick={() => setShowUserInfo(!showUserInfo)}>
                    <i className="iconfont icon-user-manage"></i>
                </div>
            </div>
            {showUserInfo && (
                <UserDropdown
                    user={userInfo}
                    onChangePassword={onChangePassword}
                    onLogout={onLogout}
                    onClose={() => setShowUserInfo(false)}
                />
            )}
        </>
    );
});

function mapStateToProps(state) {
    return {
        userInfo: state.get('userInfo'),
        menu: state.get('menu'),
    };
}

export default connect(mapStateToProps)(Header);
